<template>
  <div class="cons DeviceManagement">
    <div class="videoDome">
      <div class="main_title">
        <i class="iconfont el-icon-shebeiguanli"></i>&nbsp;设备管理
      </div>
      <div class="serch-header">
        状态：<el-select v-model="status" placeholder="请选择" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        IMEI：<el-input
          v-model="imei"
          placeholder="设备IMEI"
          size="mini"
          clearable
        ></el-input>
        设备卡号：<el-input
          v-model="sim"
          placeholder="设备卡号"
          size="mini"
          clearable
        ></el-input>
        负责人：<el-input
          v-model="fname"
          placeholder="负责人姓名"
          size="mini"
          clearable
        ></el-input>
        <el-button
          type="primary"
          @click="inquery"
          class="el-icon-search"
          size="mini"
        >
          查询
        </el-button>
      </div>
      <el-table
        :data="tableData"
        height="72vh"
        stripe
        :row-style="{ height: 0 + 'px' }"
        :cell-style="{ padding: 5 + 'px' }"
        style="width: 100%"
        :header-cell-style="tableHeaderColor"
        ref="NvrTable"
      >
        <el-table-column
          sortable
          show-overflow-tooltip
          prop="nvr_name"
          label="装置名称"
        >
        </el-table-column>
        <el-table-column prop="nvr_state" sortable label="设备状态">
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.nvr_state == 1 ? '#fff' : '#979a9d',
              }"
            >
              {{ scope.row.nvr_state == 1 ? "在线" : "离线" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="版本及状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.upgradeStatus == '升级成功' ? '' : '#e1c813',
              }"
            >
              {{
                scope.row.upgradeStatus == "升级成功"
                  ? scope.row.essential_info_version
                  : scope.row.upgradeStatus
              }}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          sortable
          prop="nvr_IMEI"
          label="IMEI"
        >
        </el-table-column>
        <el-table-column
          prop="nvr_simCard"
          show-overflow-tooltip
          label="设备卡号"
        >
        </el-table-column>
        <el-table-column prop="nvr_principal" label="负责人"> </el-table-column>
        <el-table-column
          prop="nvr_principalPhone"
          label="负责人电话"
          width="160"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope">
            <el-tooltip content="设备详情" placement="top" effect="dark">
              <el-button
                class="el-icon-tickets"
                @click="showpartic(scope.row)"
                type="primary"
                size="mini"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="参数修改" placement="top" effect="dark">
              <el-button
                :class="{ acta: scope.row.nvr_state == 0 }"
                class="el-icon-setting"
                @click="paramSetting(scope.row)"
                type="primary"
                size="mini"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="设备升级" placement="top" effect="dark">
              <el-button
                :class="{ act: scope.row.nvr_state == 0 }"
                class="iconfont el-icon-shengji"
                @click="changeUpgrade(scope.row)"
                :disabled="scope.row.nvr_state == 0"
                type="primary"
                size="mini"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              :content="scope.row.nvr_state == 0 ? '设备离线' : '跳转直播'"
              placement="top"
              effect="dark"
            >
              <el-button
                :class="{ act: scope.row.nvr_state == 0 }"
                :disabled="scope.row.nvr_state == 0"
                class="el-icon-monitor"
                @click="skip(scope.row)"
                type="primary"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[limit, 20, 30, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <!-- 设备详情 -->
    <el-dialog
      title="设备详情"
      :visible.sync="dialogFormVisible"
      center
      width="70%"
      top="10vh"
      v-dialogDrag
    >
      <el-form
        :model="{ pariticForm }"
        :label-width="formLabelWidth"
        class="xqform"
      >
        <h2>设备信息</h2>
        <el-form-item label="设备名称">
          <el-input
            v-model="pariticForm.nvr_name"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="IMEI">
          <el-input
            v-model="pariticForm.nvr_IMEI"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="IP">
          <el-input v-model="pariticForm.nvr_ip" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="图像色彩">
          <span>{{ pariticForm.color_select == 0 ? "黑白" : "彩色" }}</span>
        </el-form-item>
        <el-form-item label="饱和度">
          <el-input
            v-model="pariticForm.saturation"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="亮度">
          <el-input
            v-model="pariticForm.luminance"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="对比度">
          <el-input
            v-model="pariticForm.contrast"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="分辨率">
          <span>
            {{
              pariticForm.resolution
                ? resolutions[pariticForm.resolution - 1].label
                : "000"
            }}
          </span>
        </el-form-item>
        <h2>设备SIM信息</h2>
        <el-form-item label="设备卡号">
          <el-input
            v-model="pariticForm.nvr_simCard"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡套餐">
          <el-input
            v-model="pariticForm.nvr_simPlan"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input
            v-model="pariticForm.nvr_principal"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人电话">
          <el-input
            v-model="pariticForm.nvr_principalPhone"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <h2>主站信息</h2>

        <el-form-item label="经度">
          <el-input
            v-model="pariticForm.nvr_longitude"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input
            v-model="pariticForm.nvr_dimensionality"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input
            v-model="pariticForm.nvr_highly"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="pariticForm.nvr_address"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="隶属">
          <el-input
            v-model="pariticForm.nvr_address"
            disabled="disabled"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >关 闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 参数设置 -->
    <el-dialog
      title="设备参数设置"
      :visible.sync="settingVisible"
      center
      width="30%"
      top="30vh"
      v-dialogDrag
    >
      <el-form :label-width="formLabelWidth">
        <!-- <el-form-item label="摄像头">
          <el-select v-model="cameraType" placeholder="请选择摄像头">
            <el-option label="主摄像头" value="0"></el-option>
            <el-option label="副摄像头" value="1"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="设备名称">
          <p style="color: white">{{ pariticForm.nvr_name }}</p>
        </el-form-item>
        <el-form-item label="修改参数">
          <el-select v-model="settinVal" placeholder="请选择选择修改参数">
            <el-option label="设备信息设置" value="0"></el-option>
            <el-option
              label="SIM卡信息设置"
              value="1"
              v-show="state == 1"
            ></el-option>
            <el-option label="主站信息设置" value="2"></el-option>
            <el-option
              label="拍照时间设置"
              value="3"
              v-show="state == 1"
            ></el-option>
            <el-option
              label="图像采集参数设置"
              value="4"
              v-show="state == 1"
            ></el-option>
            <el-option
              label="摄像头切换时间设置"
              value="5"
              v-show="state == 1"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setting">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 设备信息设置 -->
    <el-dialog
      title="设备信息设置"
      class="setted"
      :visible.sync="sett01"
      center
      width="50%"
      top="15vh"
      v-dialogDrag
    >
      <el-form :model="{ pariticForm }" :label-width="formLabelWidth">
        <el-form-item label="装置名称">
          <el-input
            maxlength="16"
            show-word-limit
            v-model="pariticForm.nvr_name"
          ></el-input>
        </el-form-item>
        <el-form-item label="IMEI">
          <el-input
            v-model="pariticForm.nvr_IMEI"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="IP">
          <el-input v-model="pariticForm.nvr_ip" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="网关">
          <el-input
            v-model="pariticForm.nvr_gateway"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="子网掩码">
          <el-input
            v-model="pariticForm.nvr_netmask"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="DNS">
          <el-input
            v-model="pariticForm.nvr_DNS"
            disabled="disabled"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back(0)">&lt; 返回上一步</el-button>
        <el-button type="primary" @click="settingForm(0)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- SIM卡信息设置 -->
    <el-dialog
      title="SIM卡信息设置"
      class="setted"
      :visible.sync="sett02"
      center
      width="50%"
      top="15vh"
      v-dialogDrag
    >
      <el-form
        :model="{ pariticForm }"
        :label-width="formLabelWidth"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="设备卡号">
          <el-input
            v-model="pariticForm.nvr_simCard"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡套餐">
          <el-input v-model="pariticForm.nvr_simPlan"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="pariticForm.nvr_principal"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="phone">
          <el-input v-model="pariticForm.nvr_principalPhone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back(1)">&lt; 返回上一步</el-button>
        <el-button type="primary" @click="settingForm(1)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 主站信息设置 -->
    <el-dialog
      title="主站信息设置"
      class="setted"
      :visible.sync="sett03"
      center
      width="50%"
      top="15vh"
      v-dialogDrag
    >
      <el-form :model="{ pariticForm }" :label-width="formLabelWidth">
        <el-form-item label="经度">
          <el-input
            v-model="pariticForm.nvr_longitude"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input
            v-model="pariticForm.nvr_dimensionality"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input
            v-model="pariticForm.nvr_highly"
            disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="pariticForm.nvr_address"></el-input>
        </el-form-item>
        <el-form-item label="隶属">
          <el-input v-model="pariticForm.nvr_address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back(2)">&lt; 返回上一步</el-button>
        <el-button type="primary" @click="settingForm(2)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 拍照时间设置 -->
    <el-dialog
      title="拍照时间设置"
      class="setted"
      :visible.sync="sett04"
      center
      width="50%"
      top="15vh"
      v-dialogDrag
    >
      <el-form :model="{ pariticForm }" :label-width="formLabelWidth">
        <el-form-item label="已有时间">
          <ul>
            <li v-for="(time, idx) in timeList" :key="idx">
              {{ time }}
              <i @click="deleTimes(idx)" class="el-icon-circle-close"></i>
            </li>
          </ul>
        </el-form-item>

        <el-form-item label="添加时间点">
          <el-time-picker
            v-model="addTime"
            placeholder="任意时间点"
            value-format="HH:mm"
            :picker-options="{
              format: 'HH:mm',
            }"
            @change="changeTime"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back(3)">&lt; 返回上一步</el-button>
        <el-button type="primary" @click="settingForm(3)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 图像采集设置 -->
    <el-dialog
      title="图像采集设置"
      class="setted"
      :visible.sync="sett05"
      center
      width="50%"
      top="15vh"
      v-dialogDrag
    >
      <el-form :model="{ pariticForm }" :label-width="formLabelWidth">
        <el-form-item label="色彩选择">
          <el-radio-group v-model="pariticForm.color_select">
            <el-radio :label="0">黑白</el-radio>
            <el-radio :label="1">彩色</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="对比度">
          <el-slider
            v-model="pariticForm.contrast"
            show-input
            :disabled="imgdis"
            :min="1"
          ></el-slider>
        </el-form-item>
        <el-form-item label="亮度">
          <el-slider
            v-model="pariticForm.luminance"
            show-input
            :min="1"
            :disabled="imgdis"
          ></el-slider>
        </el-form-item>
        <el-form-item label="饱和度">
          <el-slider
            v-model="pariticForm.saturation"
            show-input
            :min="1"
            :disabled="imgdis"
          ></el-slider>
        </el-form-item>
        <el-form-item label="效果示例">
          <img
            class="imghls"
            :style="{ filter: contrasts }"
            src="../assets/images/RC.jpg"
            alt=""
          />
        </el-form-item>
        <el-form-item label="分辨率">
          <el-select
            ref="resolution"
            v-model="pariticForm.resolution"
            placeholder="请选择"
          >
            <el-option
              v-for="item in resolutions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="恢复默认值">
          <el-button> 设 为 默 认 值</el-button>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back(4)">&lt; 返回上一步</el-button>
        <el-button
          type="primary"
          @click="
            () => {
              pariticForm.contrast = 50;
              pariticForm.luminance = 50;
              pariticForm.saturation = 50;
              pariticForm.color_select = 1;
              pariticForm.resolution = 8;
            }
          "
        >
          恢复为初始值</el-button
        >
        <el-button type="primary" @click="settingForm(4)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 摄像头切换时间设置 -->
    <el-dialog
      title="切换时间设置"
      class="taggle-carme"
      :visible.sync="sett06"
      center
      width="50%"
      top="15vh"
      v-dialogDrag
    >
      <el-form :label-width="formLabelWidth">
        <el-form-item label="主摄开启时间">
          <el-time-picker
            v-model="zOpenTime"
            placeholder="任意时间点"
            value-format="HH:mm"
            :picker-options="{
              format: 'HH:mm',
            }"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="副摄开启时间">
          <el-time-picker
            v-model="fOpenTime"
            placeholder="任意时间点"
            value-format="HH:mm"
            :picker-options="{
              format: 'HH:mm',
            }"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back(5)">&lt; 返回上一步</el-button>
        <el-button type="primary" @click="settingForm(5)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 升级弹窗 -->
    <el-dialog
      title="升级设置"
      class="setted"
      :visible.sync="upgrade"
      center
      width="50%"
      top="15vh"
      v-dialogDrag
    >
      <el-form :label-width="formLabelWidth">
        <el-form-item label="升级地址">
          <el-input v-model="upgradeUrl"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="upgradeDown">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  QueryDevice,
  SaveSetting,
  changeImgParame,
  configTimeParame,
  queryPhotoTimes,
  NvrUpdate,
  camerSwitch,
  selectCamerTimes,
} from "@/http";
export default {
  name: "DeviceManagement",
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      status: "",
      addTime: "", // 必须绑定 否则change事件无效果
      imei: "",
      sim: "",
      fname: "",
      options: [
        { value: "", label: "全部" },
        { value: 1, label: "在线" },
        { value: 0, label: "离线" },
      ],
      tableData: [],
      count: 0,
      sid: "", //设备id
      page: 1,
      limit: 10,
      dialogFormVisible: false,
      settingVisible: false,
      sett01: false,
      sett02: false,
      sett03: false,
      sett04: false,
      sett05: false,
      sett06: false,
      formLabelWidth: "100px",
      settinVal: "0",
      pariticForm: [],
      zOpenTime: "08:00",
      fOpenTime: "18:00",
      timeList: ["22:00"],
      cameraType: "0", // 0 主摄像 1 副摄像头
      state: "",
      resolutions: [
        { value: 1, label: "320*240" },
        { value: 2, label: "640*480" },
        { value: 3, label: "704*576" },
        { value: 4, label: "800*600" },
        { value: 5, label: "1024*768" },
        { value: 6, label: "1280*1024" },
        { value: 7, label: "1280*720" },
        { value: 8, label: "1920*1080" },
        { value: 9, label: "2560*1440" },
        { value: 10, label: "3480*2160" },
        { value: 11, label: "4160x3120" },
      ],
      rules: {
        phone: {
          required: true,
          message: "请输入正确的手机号",
          trigger: "blur",
          validator: checkPhone,
        },
      },
      timeout: null,
      timeoutImei: null,
      ImeiData: [],
      // color_select: "1", // 色彩 0黑白 1彩色
      // contrast: 50, //对比度
      // luminance: 50, // 亮度
      // saturation: 50, //饱和度
      imgdis: false,
      upgrade: false,
      upgradeUrl: "",
      getDevTimer: null,
    };
  },
  props: {
    // pariticForm: { type: Array },
  },
  mounted() {
    this.limit = Math.floor(
      (window.innerHeight - this.$refs.NvrTable.$el.offsetTop - 165) / 36
    );
    this.queryDev();
  },
  computed: {
    contrasts: function () {
      return `contrast(${this.pariticForm.contrast + 50}%) brightness(${
        this.pariticForm.luminance + 50
      }%) saturate(${this.pariticForm.saturation + 50}%) grayscale(${
        this.pariticForm.color_select == 0 ? 100 : 0
      }%)`;
    },
    // luminances: function () {
    //   return `brightness(${this.luminances}%)`;
    // },
    // saturations: function () {
    //   return `saturate(${this.saturation}%)`;
    // },
  },
  watch: {
    status() {
      this.queryDev();
    },
    imei() {
      clearTimeout(this.timeoutImei);
      this.timeoutImei = setTimeout(() => {
        this.queryDev();
      }, 900);
    },
    fname() {
      clearTimeout(this.timeoutImei);
      this.timeoutImei = setTimeout(() => {
        this.queryDev();
      }, 900);
    },
    pariticForm: {
      handler() {
        this.$forceUpdate();
      },
      deep: true,
    },
    // 清空form
    settingVisible: {
      handler(val) {
        !val
          ? (() => {
              if (
                !this.sett01 &&
                !this.sett02 &&
                !this.sett03 &&
                !this.sett04 &&
                !this.sett05
              ) {
                this.pariticForm = [];
              }
            })()
          : "";
      },
    },
  },
  methods: {
    tableHeaderColor() {
      return "background-color: #009A9A;color: #fff;font-weight: 500;'font-size':'14px';height:20px;padding:8px 0;border:none";
    },
    queryDev() {
      QueryDevice({
        nvr_state: this.status,
        nvr_IMEI: this.imei,
        nvr_simCard: this.sim,
        nvr_principal: this.fname,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        this.tableData = res.data;
        this.count = res.count;
        this.getDevTimer && clearTimeout(this.getDevTimer);
        this.getDevTimer = setTimeout(() => {
          this.queryDev();
        }, 1000 * 60);
      });
    },
    inquery() {
      this.queryDev();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.queryDev();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.queryDev();
    },
    // 显示详情
    showpartic(row) {
      this.pariticForm = row;
      row.luminance
        ? ""
        : ((this.pariticForm.luminance = 50),
          (this.pariticForm.color_select = 1),
          (this.pariticForm.contrast = 50),
          (this.pariticForm.saturation = 50),
          (this.pariticForm.resolution = 8));

      this.dialogFormVisible = true;
    },
    paramSetting(row) {
      console.log(row);
      this.state = row.nvr_state;
      this.sid = row.nvr_id;
      this.pariticForm = row;
      row.luminance
        ? ""
        : ((this.pariticForm.luminance = 50),
          (this.pariticForm.color_select = 1),
          (this.pariticForm.contrast = 50),
          (this.pariticForm.saturation = 50),
          (this.pariticForm.resolution = 8));
      this.settingVisible = true;
    },
    back(val) {
      //   var set = this."sett" + val;
      val == 0
        ? (this.sett01 = false)
        : val == 1
        ? (this.sett02 = false)
        : val == 2
        ? (this.sett03 = false)
        : val == 3
        ? (this.sett04 = false)
        : val == 4
        ? (this.sett05 = false)
        : (this.sett06 = false);
      //   this.['sett' +val] = false;
      this.settingVisible = true;
    },
    setting() {
      this.settingVisible = false;
      let val = this.settinVal;
      val == 0
        ? (this.sett01 = true)
        : val == 1
        ? (this.sett02 = true)
        : val == 2
        ? (this.sett03 = true)
        : val == 3
        ? (() => {
            queryPhotoTimes({ nvr_id: this.sid }).then((res) => {
              console.log(res);
              this.sett04 = true;
              this.timeList = [];
              res.data.forEach((item) => {
                // console.log(item);
                let tima = item.split(":");
                tima[0] = tima[0] < 10 ? "0" + tima[0] : tima[0];
                tima[1] = tima[1] < 10 ? "0" + tima[1] : tima[1];
                // console.log(tima.join(":"));
                this.timeList.push(tima.join(":"));
              });
            });
          })()
        : val == 4
        ? (this.sett05 = true)
        : (() => {
            selectCamerTimes({ nvr_id: this.sid }).then((res) => {
              console.log(res);
              res.data.length > 0 &&
                ((this.zOpenTime = res.data[0]),
                (this.fOpenTime = res.data[1]));
              this.sett06 = true;
            });
          })();
    },
    //提交信息
    settingForm(val) {
      val == 0 || val == 1 || val == 2
        ? SaveSetting(this.pariticForm).then((res) => {
            if (res.result_code == 200) {
              this.$message.success("修改成功!");
              val == 0
                ? (this.sett01 = false)
                : val == 1
                ? (this.sett02 = false)
                : (this.sett03 = false);
            } else {
              this.$message.warning("修改失败!");
            }
          })
        : val == 3
        ? (() => {
            configTimeParame({
              nvr_id: this.sid,
              photoInterval: this.timeList,
            })
              .then((res) => {
                console.log(res);
                res.result_code == 200
                  ? (this.$message.success("设置成功!"), (this.sett04 = false))
                  : this.$message.warning("设置失败!");
              })
              .catch((err) => {
                console.log(err);
              });
          })()
        : val == 4
        ? (() => {
            if (!this.pariticForm.resolution) {
              this.$refs.resolution.$el.click();
            } else {
              changeImgParame({
                color_select: this.pariticForm.color_select,
                contrast: this.pariticForm.contrast,
                luminance: this.pariticForm.luminance,
                nvr_id: this.sid,
                resolution: this.pariticForm.resolution,
                saturation: this.pariticForm.saturation,
              }).then((res) => {
                console.log(res);
                if (res.result_code == 200) {
                  this.sett05 = false;
                  this.$message.success("修改成功!");
                } else {
                  this.$message.error("修改失败!");
                }
              });
            }
          })()
        : (() => {
            camerSwitch({
              nvr_id: this.sid,
              cameraSwitch: [this.zOpenTime, this.fOpenTime],
            }).then((res) => {
              res.result_code == 200 &&
                (this.$message.success("修改成功!"), (this.sett06 = false));
            });
          })();
    },

    chagneColor(val) {
      console.log(val);
    },

    changeTime(val) {
      this.timeList.length > 71
        ? (() => {
            this.$message.warning("最大支持72组数据,请删除后添加!");
          })()
        : (() => {
            if (this.timeList.indexOf(val) == -1) {
              this.timeList.push(val);
              this.timeList = this.timeList.sort();
            }
          })();
    },
    deleTimes(idx) {
      this.timeList.splice(idx, 1);
    },
    // 设备升级
    changeUpgrade(val) {
      this.pariticForm = val;
      this.upgrade = true;
    },
    // 确定升级
    upgradeDown() {
      console.log(this.pariticForm);
      this.upgradeUrl
        ? (() => {
            NvrUpdate({
              nvr_id: this.pariticForm.nvr_id,
              url: this.upgradeUrl,
            }).then((res) => {
              console.log(res);
              this.upgrade = false;
            });
          })()
        : this.$message.warning("请输入升级地址!");
    },

    skip(val) {
      this.$router.push({
        name: "Video",
        params: {
          id: val.nvr_id,
          imei: val.nvr_IMEI,
        },
      });
    },
  },
  destroyed() {
    clearTimeout(this.getDevTimer);
  },
};
</script>

<style lang="less" scoped>
.videoDome {
  width: calc(100% - 48px);
  height: 83.5vh;
}

.serch-header {
  margin-top: 10px;
  padding: 15px 0;
  font-size: 14px;
  .el-select,
  .el-input {
    width: 8vw;
    margin-right: 20px;
  }
}
.act {
  background: #bdccd9;
  border-color: #9ca4ab;
}
.acta {
  background: #70bcff;
}
.el-dialog {
  margin-top: 10vh;
  h2 {
    color: #00f5de;
    font-size: 18px;
    text-align: center;
    padding: 10px 10px 5px;
  }
  .el-form-item {
    margin-bottom: 2px;
    .el-input {
      border: none;
      height: 36px;
      input {
        height: 36px;
      }
    }
  }
  .el-select {
    width: 100%;
  }
}
.xqform {
  &::after {
    content: " ";
    display: block;
    height: 2px;
    clear: both;
  }
  .el-form-item {
    width: 50%;
    float: left;
    span {
      color: white;
    }
  }
  h2 {
    padding: 15px 0 10px;
    clear: both;
  }
}

.setted {
  .el-form-item {
    margin-bottom: 10px;
    .el-date-editor {
      width: 100%;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        background-color: white;
        color: #456;
        padding: 0 10px;
        border-radius: 5px;
        margin-right: 15px;
        margin-bottom: 15px;
        i {
          color: tomato;
        }
      }
    }
  }
}
.imghls {
  width: 150px;
  height: 100px;
}
</style>
